<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 98px;
				height: 90px;
				border: 1px solid red;
			}
			.box1{
				padding-top: 20px;
			}
			.box2{
				padding-right: 40px;
			}
			.box3{
				padding-bottom: 80px;
			}
			.box4{
				padding-left: 160px;
			}
			
			.box5{
				padding:  20px 40px 80px 160px ;
			}
		</style>
	</head>
	<body>
		
		<!-- 
		 1.什么是内边距
		 
		 边框和内容之间的距离就是内边距
		 
		 注意点:给标签设置内边距之后,标签占用的宽度和高度会变化
		 
		 
		连写:
		padding: 上 右 下 左  跟border 连写一样
		
		 
		 -->
		
		<div class="box1">我是文字我是文字我是文字我是文字我是文字
		 </div>
		<hr>
		<div class="box2">我是文字我是文字我是文字我是文字我是文字
		 </div>
		<hr>
		<div class="box3">我是文字我是文字我是文字我是文字我是文字
		 </div>
		<hr>
		<div class="box4">我是文字我是文字我是文字我是文字我是文字
		 </div>
		<hr>
		<div class="box5">我是文字我是文字我是文字我是文字我是文字
		 </div>
		
	</body>
</html>